本节我们讲一下中间件,什么是中间件?大家如果接触过 express、koa 这类 node.js 框架,应该都会知道它们其实就是请求拦截器,当一个请求过来时,通过中间件可以增加自己的处理逻辑,相当于流水线上加一道“工序”。在 Nuxt 中也存在这种中间件机制,只不过被细分为两种:
- Route middleware:路由中间件;
- Server middleware:服务器中间件。
# 路由中间件
路由中间件并不是一定运行在客户端的中间件,而是运行在 Nuxt 应用中 Vue 渲染部分,路由中间件会在进入路由之前被调用,如果是 SSR,这个执行时刻既可能在服务端(首屏),也可能在客户端。
# 中间件类型
路由中间件根据影响范围和使用方式的不同,又分为三种:
- 匿名中间件:只影响一个页面,不可复用;
- 具名中间件:指定若干影响页面,可复用、组合;
- 全局中间件:影响所有页面,文件名需要加后缀 global。
# 中间件使用
匿名中间件用法,mid.vue:
javascript
复制代码definePageMeta({
middleware(to, from) {
console.log('匿名中间件,具体页面执行');
}
})
@前端进阶之旅: 代码已经复制到剪贴板
具名中间件用法,mid.vue:
css
复制代码definePageMeta({
middleware: ['amid', 'bmid']
})
@前端进阶之旅: 代码已经复制到剪贴板
定义具名中间件,amid.ts:
javascript
复制代码export default defineNuxtRouteMiddleware((to, from) => {
console.log('具名中间件a,影响指定页面:' + to.path);
})
@前端进阶之旅: 代码已经复制到剪贴板
全局中间件,创建 cmid.global.ts:
javascript
复制代码export default defineNuxtRouteMiddleware((to, from) => {
console.log('全局中间件c,影响所有页面');
})
@前端进阶之旅: 代码已经复制到剪贴板
效果如下:

